<template>
	<view class="container">
		<view class="login-card">
			<view class="logo">足球预测</view>
			<view class="subtitle">登录您的账号</view>
			
			<view class="form-group">
				<input 
					class="input" 
					type="text" 
					v-model="username" 
					placeholder="用户名" 
					@input="clearError"
				/>
			</view>
			
			<view class="form-group">
				<input 
					class="input" 
					type="password" 
					v-model="password" 
					placeholder="密码" 
					@input="clearError"
				/>
			</view>
			
			<view class="error-message" v-if="errorMessage">
				{{ errorMessage }}
			</view>
			
			<button class="login-btn" @click="login" :disabled="isLoading">
				{{ isLoading ? '登录中...' : '登 录' }}
			</button>
			
			<view class="demo-info">
				<text>提示：任何邮箱均可注册</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			username: '',
			password: '',
			errorMessage: '',
			isLoading: false,
			apiBaseUrl: 'http://127.0.0.1:8000',
			// 判断环境变量
			isMpWeixin: false
		}
	},
	onLoad() {
		// 检查是否在微信小程序环境
		// #ifdef MP-WEIXIN
		this.isMpWeixin = true;
		console.log('当前在微信小程序环境中运行');
		// #endif
		
		// 检查是否已经登录
		const token = uni.getStorageSync('token');
		const userInfo = uni.getStorageSync('userInfo');
		
		if (token && userInfo) {
			// 已经登录，直接跳转到首页
			this.navigateToIndex();
		}
	},
	methods: {
		clearError() {
			this.errorMessage = '';
		},
		
		login() {
			// 输入验证
			if (!this.username.trim()) {
				this.errorMessage = '请输入用户名';
				return;
			}
			
			if (!this.password.trim()) {
				this.errorMessage = '请输入密码';
				return;
			}
			
			this.isLoading = true;
			
			// 调用实际的登录API
			this.apiLogin();
		},
		
		// 实际登录API调用
		apiLogin() {
			// 在控制台打印更多信息，帮助调试
			const url = `${this.apiBaseUrl}/users/login`;
			console.log('正在请求登录接口...');
			console.log('请求URL:', url);
			console.log('请求参数:', `grant_type=password&username=${this.username}&password=${this.password}&scope=&client_id=string&client_secret=string`);
			
			uni.request({
				url: url,
				method: 'POST',
				header: {
					'accept': 'application/json',
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				data: `grant_type=password&username=${this.username}&password=${this.password}&scope=&client_id=string&client_secret=string`,
				success: (res) => {
					console.log('登录响应状态码:', res.statusCode);
					console.log('登录API返回数据:', JSON.stringify(res.data));
					
					if (res.statusCode === 200 && (res.data.access_token || res.data.token)) {
						// 登录成功，提取token
						const token = res.data.access_token || res.data.token;
						console.log('获取到token:', token);
						
						// 清除之前可能的缓存
						try {
							uni.removeStorageSync('token');
							uni.removeStorageSync('userInfo');
						} catch (e) {
							console.error('清除缓存失败:', e);
						}
						
						// 保存用户信息和token到本地
						try {
							uni.setStorageSync('token', token);
							console.log('token已保存到本地存储');
							
							// 提取或构造用户信息
							const userInfo = {
								username: this.username,
								name: res.data.username || this.username,
								id: res.data.id || 1
							};
							uni.setStorageSync('userInfo', userInfo);
							console.log('用户信息已保存:', userInfo);
							
							// 登录成功后直接设置全局数据，不依赖页面跳转
							const app = getApp();
							app.globalData = app.globalData || {};
							app.globalData.token = token;
							app.globalData.userInfo = userInfo;
							app.globalData.isLoggedIn = true;
							console.log('全局数据已设置:', app.globalData);
						} catch (e) {
							console.error('保存数据到本地存储失败:', e);
						}
						
						console.log('登录成功，准备跳转...');
						
						// 不使用Toast提示，直接跳转
						this.navigateToIndex();
					} else {
						// 登录失败
						console.error('登录响应没有token:', res.data);
						this.errorMessage = res.data?.detail || res.data?.message || '用户名或密码错误';
						this.isLoading = false;
					}
				},
				fail: (err) => {
					console.error('登录请求失败详情:', err);
					
					// 检查是否是404错误（接口不存在）
					if (err.errMsg && err.errMsg.includes('404')) {
						this.errorMessage = '登录接口不存在，请检查API配置';
						console.error('登录接口404错误，可能是API地址配置错误或后端服务未启动');
					} else {
						this.errorMessage = '网络错误，请稍后重试';
					}
					
					this.tryFallbackLogin();
				},
				complete: () => {
					this.isLoading = false;
				}
			});
		},
		
		// 尝试备选登录方式
		tryFallbackLogin() {
			// 调试环境：如果API未连接，使用演示账号作为备选(仅开发阶段使用)
			if (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === undefined) {
				console.warn('API请求失败，尝试使用备选登录方式');
				this.fallbackLogin();
			}
		},
		
		// 仅用于开发环境的备选登录方式
		fallbackLogin() {
			console.warn('使用备选登录方式 - 仅在API不可用时使用');
			
			// 演示账号验证
			if (this.username === 'admin' && this.password === '123456') {
				// 登录成功
				const userInfo = {
					id: 1,
					username: this.username,
					name: '管理员（开发模式）',
					avatar: ''
				};
				
				// 保存用户信息和token到本地
				const token = 'dev-mock-jwt-token-' + Date.now();
				
				try {
					uni.setStorageSync('token', token);
					uni.setStorageSync('userInfo', userInfo);
					
					// 登录成功后直接设置全局数据，不依赖页面跳转
					const app = getApp();
					app.globalData = app.globalData || {};
					app.globalData.token = token;
					app.globalData.userInfo = userInfo;
					app.globalData.isLoggedIn = true;
				} catch (e) {
					console.error('保存模拟登录数据失败:', e);
				}
				
				// 跳转到首页
				this.navigateToIndex();
			} else {
				this.isLoading = false;
				this.errorMessage = '演示环境仅支持admin/123456账号';
			}
		},
		
		// 跳转到首页
		navigateToIndex() {
			console.log('准备跳转到首页...');
			
			// 检查缓存中的token是否已成功保存
			const token = uni.getStorageSync('token');
			console.log('当前保存的token:', token);
			
			// 添加延时，确保数据保存完成
			setTimeout(() => {
				try {
					// 尝试使用switchTab
					uni.switchTab({
						url: '/pages/index/index',
						success: () => {
							console.log('跳转到首页成功');
						},
						fail: (err) => {
							console.error('switchTab跳转失败:', err);
							// 如果失败，尝试使用reLaunch
							uni.reLaunch({
								url: '/pages/index/index',
								fail: (err2) => {
									console.error('reLaunch也失败了:', err2);
								}
							});
						}
					});
				} catch (e) {
					console.error('跳转异常:', e);
				}
			}, 500);
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: $bg-color;
	padding: $spacing-lg;
}

.login-card {
	width: 100%;
	max-width: 700rpx;
	background-color: $card-bg;
	border-radius: $card-radius;
	padding: $spacing-xl;
	box-shadow: $box-shadow;
}

.logo {
	font-size: 56rpx;
	font-weight: 700;
	text-align: center;
	color: $primary;
	margin-bottom: $spacing-sm;
}

.subtitle {
	font-size: $font-size-base;
	text-align: center;
	color: $text-color-secondary;
	margin-bottom: $spacing-xl;
}

.form-group {
	margin-bottom: $spacing-lg;
}

.input {
	width: 100%;
	height: 90rpx;
	border-radius: $btn-radius;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 0 $spacing-lg;
	font-size: $font-size-base;
}

.error-message {
	color: $danger;
	font-size: $font-size-sm;
	margin-bottom: $spacing-base;
	text-align: center;
}

.login-btn {
	width: 100%;
	height: 90rpx;
	background-color: $primary;
	color: $light;
	border-radius: $btn-radius;
	font-size: $font-size-lg;
	font-weight: 600;
	margin-top: $spacing-base;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&:disabled {
		opacity: 0.7;
	}
}

.demo-info {
	margin-top: $spacing-xl;
	font-size: $font-size-xs;
	color: $text-color-secondary;
	text-align: center;
	display: flex;
	flex-direction: column;
}
</style> 